<script setup>
import { ref, computed } from 'vue'
import { useCartStore } from '@/stores/cartStore'
import { ElMessage } from 'element-plus'
import wxPay from '@/assets/images/ewm.png'
import aliPay from '@/assets/images/ewm.png'

const props = defineProps({
  show: Boolean
})

const emit = defineEmits(['update:show'])

const cartStore = useCartStore()
const payMethod = ref('wx')
const countdown = ref(1800)
const orderId = ref('')

const dialogVisible = computed({
  get: () => props.show,
  set: (value) => emit('update:show', value)
})

const countdownFormat = computed(() => {
  const minutes = Math.floor(countdown.value / 60)
  const seconds = countdown.value % 60
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
})

const qrcode = computed(() => payMethod.value === 'wx' ? wxPay : aliPay)

let timer = null
const startCountdown = () => {
  countdown.value = 1800
  orderId.value = 'DD' + Date.now()
  timer = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--
    } else {
      handleClose()
      ElMessage.warning('支付超时，请重新下单')
    }
  }, 1000)
}

const handleClose = () => {
  clearInterval(timer)
  dialogVisible.value = false
}

const mockPaySuccess = () => {
  clearInterval(timer)
  dialogVisible.value = false
  ElMessage.success('支付成功')
  cartStore.cart.value = []
}

defineExpose({
  startCountdown
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="订单支付"
    width="460px"
    :close-on-click-modal="false"
    @close="handleClose"
    class="payment-dialog"
    center
  >
    <div class="payment-content">
      <!-- 订单信息 -->
      <div class="order-info">
        <p class="order-id">订单号：{{ orderId }}</p>
        <p class="amount">
          支付金额：
          <span class="price">¥{{ cartStore.totalPrice().toFixed(2) }}</span>
        </p>
      </div>

      <!-- 支付方式选择 -->
      <div class="payment-method">
        <el-radio-group v-model="payMethod" size="large">
          <el-radio-button label="wx">
            <template #default>
              <el-icon><i-ep-WalletFilled /></el-icon>
              微信支付
            </template>
          </el-radio-button>
          <el-radio-button label="alipay">
            <template #default>
              <el-icon><i-ep-Money /></el-icon>
              支付宝
            </template>
          </el-radio-button>
        </el-radio-group>
      </div>

      <!-- 二维码区域 -->
      <div class="qrcode-wrapper">
        <div class="qrcode-box">
          <img :src="qrcode" :alt="`${payMethod === 'wx' ? '微信' : '支付宝'}支付`">
        </div>
        <p class="scan-tip">
          请使用{{ payMethod === 'wx' ? '微信' : '支付宝' }}扫码支付
        </p>
      </div>

      <!-- 倒计时 -->
      <div class="countdown">
        <el-icon><Timer /></el-icon>
        支付剩余时间：{{ countdownFormat }}
      </div>

      <!-- 测试按钮 -->
      <div class="action">
        <el-button type="primary" @click="mockPaySuccess" size="large">
          模拟支付成功
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.payment-dialog {
  :deep(.el-dialog__body) {
    padding: 30px;
  }
}

.payment-content {
  .order-info {
    text-align: center;
    margin-bottom: 30px;

    .order-id {
      color: #666;
      margin-bottom: 10px;
    }

    .amount {
      font-size: 16px;

      .price {
        color: $priceColor;
        font-size: 28px;
        font-weight: bold;
      }
    }
  }

  .payment-method {
    text-align: center;
    margin-bottom: 30px;

    .el-radio-group {
      .el-icon {
        margin-right: 4px;
      }
    }
  }

  .qrcode-wrapper {
    text-align: center;
    margin-bottom: 20px;

    .qrcode-box {
      width: 200px;
      height: 200px;
      margin: 0 auto 10px;
      padding: 10px;
      background: #fff;
      border: 1px solid #e4e4e4;
      border-radius: 4px;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    .scan-tip {
      color: #666;
      font-size: 14px;
    }
  }

  .countdown {
    text-align: center;
    color: #666;
    margin-bottom: 20px;
    font-size: 14px;

    .el-icon {
      margin-right: 4px;
      color: $priceColor;
    }
  }

  .action {
    text-align: center;

    .el-button {
      width: 200px;
    }
  }
}
</style> 